<!-- 预约车辆 - 预约车辆item -->
<template>
	<view>
		<!-- <block v-for="(item, index) in listData" :key="index"> -->
		<uni-swipe-action ref="swipeAction">
			<uni-swipe-action-item v-for="(item, index) in listData" :right-options="item.state=='2'?options:options1"
				:key="item.id" @change="swipeChange($event, index)" @click="swipeClick($event, item)">

				<view class="main-box-item" @click="clickItem(item)">
					<image class="box-img" v-if="item.cartype=='2'" src="/static/img/icon/icon_person.png" />
					<image class="box-img" v-else :src="item.carimage|getFirstImgFormat" />
					<view class="box-info">
						<view class="box-info-top">
							<view class="box-info-title">
								{{(item.cartype=='2')?item.driver:item.carcode}}
							</view>
							<view class="status" :style="getApproveState(item.state).stylefill">
								{{getApproveState(item.state).value}}
							</view>
						</view>
						<view class="box-info-bottom">
							<view class="row1">
								<!-- 	<view class="option">
									<image class="" src="/static/img/icon/icon_card.png" />
									{{item.drivingpermit|| '(未知)'}}
								</view> -->
								<view class="option">
									<image class="" src="/static/img/icon/icon_time.png" />
									提交预约时间:<uni-dateformat :date="item.createtime">
									</uni-dateformat>
								</view>
							</view>
							<view class="row1">
								<view class="option">
									<image class="" src="/static/img/icon/icon_time1.png" />
									计划入园时间:<uni-dateformat :date="item.intime"></uni-dateformat>
								</view>
							</view>
							<view class="row2">
								<view class="option">
									<image class="img" src="/static/img/icon/icon_driver.png" />
									<text class="txt">{{item.driver}}</text>
									<text class="txt2">{{item.contactphone}}</text>
								</view>
							</view>
							<view class="row3">
								<image class="" src="/static/img/icon/icon_local.png" />
								{{item.destination}}
							</view>
						</view>
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<!-- </block> -->
	</view>
</template>

<script>
	import {
		Platform,
		SideslipOptionsData,
		SideslipOptionsData1
	} from '@/static/config.js';

	import {
		GetApproveState
	} from "@/common/util.js"
	import {
		GetFirstImgFormat2
	} from "@/common/util-file.js"
	import request from '@/common/request.js';
	export default {
		props: ['list'], //数据数组

		data() {
			return {
				listData: this.list,
				options: SideslipOptionsData,
				options1: SideslipOptionsData1,
			}
		},
		mounted() {},
		methods: {
			clickItem(item) {
				this.$emit('clickItem', item)
			},
			getApproveState(val) {
				return GetApproveState(val);
			},
			// 组件打开或关闭时触发，left\right\none
			swipeChange(e, index) {
				console.log('返回：', e);
				console.log('当前索引：', index);
			},
			// 点击选项按钮时触发事件，e = {content,index} ，content（点击内容）、index（下标)
			swipeClick(e, item) {
				let {
					content
				} = e;
				let code = (item.cartype == '2') ? item.driver : item.carcode;
				if (content.text === '删除') {
					uni.showModal({
						title: '提示',
						content: '确定删除《' + code + '》的预约信息吗？',
						success: res => {
							if (res.confirm) {
								this.delBookingCar(item);
							} else if (res.cancel) {}
						}
					});
				} else if (content.text === '修改') {
					//状态 0审批通过/1已失效/2待审批/3审批不通过
					if (item.state == "2") {
						//人员预约
						if(item.cartype == '2'){
							uni.navigateTo({
								url: '/pages/booking/booking-person-add?item=' + encodeURIComponent(JSON
									.stringify(item)),
							})
						}else{
							uni.navigateTo({
								url: '/pages/booking/booking-car-add?item=' + encodeURIComponent(JSON
									.stringify(item)),
							})
						}
					
					} else {
						uni.showModal({
							title: '提示',
							content: '《' + code + '》的预约信息已经审批，不允许修改！',
							success: res => {
								if (res.confirm) {

								} else if (res.cancel) {}
							}
						});
					}

				} else {
					uni.showToast({
						title: `点击了${e.content.text}按钮`,
						icon: 'none'
					});
				}
			},
			//删除选中车辆数据
			delBookingCar(val) {
				uni.showLoading({
					title: '删除...',
					mask: false
				});
				request({
					url: Platform.api_requestUrl + '/stp-booking/DeleteById',
					data: {
						id: val.id
					},
					// header: {
					// 	'Accept': 'application/json',
					// 	// 'Content-Type': 'application/json',
					// 	'Content-Type': 'application/x-www-form-urlencoded', //自定义请求头信息
					// },
					method: 'POST',
				}).then(res => {
					uni.hideLoading();
					if (res.code == 200 && res.data) {
						uni.$emit('my-car-bookinglist-refresh', {
							key: true,
							msg: ''
						})
					} else {
						uni.showModal({
							content: '删除失败',
							showCancel: false
						})
					}
				}).catch(error => {
					uni.hideLoading();
					uni.showModal({
						content: '删除失败',
						showCancel: false
					})
				});
			},
		},
		filters: {
			getFirstImgFormat(files) {
				return GetFirstImgFormat2(files);
			}
		},
		watch: {
			list: {
				handler(item, index) { //监听到数据变化执行方法 
					this.listData = item;
				},
				deep: true // 深度监听父组件传过来对象变化 
			}
		}
	}
</script>

<style lang='scss'>
	.main-box-item {
		display: flex;
		align-items: center;
		width: calc(100% - 20px);
		height: 120px;
		background: #FFFFFF;
		/* box-shadow: 0px 2px 5px #F0F0F0; */
		/* border-radius: 4px; */
		vertical-align: middle;
		margin: 0px 10px;
		border-bottom-color: #E6E6E6;
		border-bottom-style: solid;
		border-bottom-width: 0.5px;

		.box-img {
			width: 115px;
			height: 85px;
			border-radius: 4px;

		}

		.box-info {
			flex: 1;
			padding: 5px;
			margin-left: 6px;
			width: calc(100% - 158px);

			.box-info-top {
				display: flex;

				.box-info-title {
					flex: 1;
					/* display: bloc; */
					height: 25px;
					font-size: 17px;
					font-weight: bold;
					/* 	overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2; */
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;

					.state-img {
						width: 18px;
						height: 18px;
						margin-right: 10px;
					}
				}

				.status {
					font-size: 22rpx;
					text-align: center;
					broder: 2rpx;
					border-width: 1rpx;
					border-style: solid;
					height: 38rpx;
					width: 90rpx;
					border-radius: 10rpx;
				}
			}

			.box-info-bottom {
				display: flex;
				flex-direction: column;

				/* margin-top: 15px; */
				/* padding: 2px 8px 2px 16px; */
				image {
					width: 16px;
					height: 16px;
					margin-right: 6px;
				}

				.left {
					font-size: 12px;
					max-height: 1.5rem;
					line-height: 20px;
					width: 40px;
					/* box-shadow: 0px 2px 5px #E5E5E5; */
					border-radius: 2px;
					text-align: center;
				}

				.row1 {
					display: flex;
					align-items: center;
					/* background: rgba(89, 96, 128, 0.1); */
					border-radius: 2px;
					margin: 1px 0;
					font-weight: 400;
					line-height: 12px;

					.option {
						flex: 1;
						display: flex;
						align-items: center;
						font-size: 12px;
						color: #888888;
						white-space: nowrap;
						overflow-x: hidden;
					}
				}

				.row2 {
					display: flex;
					align-items: center;
					font-weight: 400;
					line-height: 20px;
					margin: 1px 0;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					flex: 0.5;

					.option {
						flex: 1;
						display: flex;
						align-items: center;
						font-size: 12px;
						color: #888888;

						.txt2 {
							margin-left: 10rpx;
							color: #00aaff;
						}
					}
				}

				.row3 {
					display: flex;
					align-items: center;
					font-size: 12px;
					font-weight: 400;
					line-height: 20px;
					color: #888888;
					margin: 1px 0;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					flex: 0.5;

					.right {
						flex: 1;
						text-align: right;
						font-size: 12px;
						font-weight: 400;
						line-height: 20px;
						color: #888888;

						.tit {
							width: 50px;
							float: right;
							text-align: center;
							/* border-radius: 50%; */
							border-radius: 100px;
							color: #ffffff;
						}
					}
				}
			}

		}
	}





	.box-info-item {
		/* height: 60px; */
		background: #FFFFFF;
		border-top-color: #e5e5e5;
		border-top-style: solid;
		border-top-width: 0.5px;
		padding: 5px 3px;
	}
</style>
